<template>
	<div>
		<div class="graybg"></div>
		<!--头部-->
		<header id="header">
			<div class="header header_bg clearfix">
				<div class="header_left pull-left">
					<!--<router-link to="/wfriendsSearch">-->
					<router-link :to="{name:'wfriendsSearch',params:{id:userid}}">
					<i class="iconfont baiColor">&#xe680;</i>
					</router-link>
				</div>
				<div class="header_center baiColor">我的好友</div>
				<div class="header_right baiColor clearfix">
					<span class="pull-right" @click="add" style="width: 24px;height: 24px;"><i style="text-align: center;font-size: 24px;">+</i></span>
				</div>
			</div>
		</header>
		<!--input-->
		<div class="input _width header_bg">
			<router-link to="/wfriendsSearch">
				<div class="input-main marginAuto clearfix">
					<input type="text"  placeholder="新朋友"/>
					<span class="iconfont pull-right">&#xe615;</span>
				</div>
			</router-link>
		</div>
		<!--=切换导航=-->
		<div class="nav-toggle marginAuto">
			<div id="nav">
				<div class="nav">
					<div class="nav_each one" @click="nav('1')" :class="isActive == '1' ? 'navactive' : ''">
						好友列表
						<span :class="isActive == '1' ? 'navactivebottom' : ''"></span>
					</div>
					<div class="nav_each one" @click="nav('2')" :class="isActive == '2' ? 'navactive' : ''">
						聊天
						<span :class="isActive == '2' ? 'navactivebottom' : ''"></span>
					</div>
					<div class="nav_each one" @click="nav('3')" :class="isActive == '3' ? 'navactive' : ''">
						群聊
						<span :class="isActive == '3' ? 'navactivebottom' : ''"></span>
					</div>
					<div class="nav_each one" @click="nav('4')" :class="isActive == '4' ? 'navactive' : ''">
						黑名单
						<span :class="isActive == '4' ? 'navactivebottom' : ''"></span>
					</div>
				</div>
			</div>
			<!--navToggle-->
			<div id="navToggle_mian">
				<div class="navToggle_mian">
					<!--第一块-->
					<ul class="indent_each_block one_mian" v-if="navshow == '1'">
			            <div class="one_mian_each _width" v-for="friend in friends" v-if="friend == null ? false : true">
			              <router-link :to="{name:'wchat',params:{id:friend.u_id}}">
			                <div class="one_mian_each_main marginAuto clearfix">
			                  <div class="each-img pull-left">
			                    <img :src="friend.u_img" alt="头像"/>
			                  </div>
			                  <div class="name pull-left ellipsis01">
			                    <h5 v-text="friend.u_name"></h5>
			                  </div>
			                </div>
			              </router-link>
			            </div>
					</ul>
					<!--第二块-->
					<ul class="indent_each_block two_mian" v-if="navshow == '2'">
						<div class="one_mian_each _width" v-for="chat in chats" >
			              	<router-link :to="{name:'wchat',params:{id:chat.u_id}}">
			                  <div class="one_mian_each_main marginAuto clearfix">
			                    <div class="each-img pull-left">
			                      <img :src="chat.u_img" alt="头像"/>
			                    </div>
			                    <div class="name pull-left ellipsis01">
			                      <h5 v-text="chat.u_name"></h5>
			                      <p v-text="chat.content"></p>
			                    </div>
			                  </div>
			              	</router-link>
						</div>
					</ul>
					<!--第三块-->
					<ul class="indent_each_block three_mian" v-if="navshow == '3'">
						<div class="one_mian_each _width" v-for="group in groups">
			                <router-link :to="{name:'wchatgroup',params:{id:group.g_id}}">
			                  <div class="one_mian_each_main marginAuto clearfix">
			                    <div class="each-img pull-left">
			                      <img :src="group.g_img" alt="头像"/>
			                    </div>
			                    <div class="name pull-left ellipsis01">
			                      <h3 >{{group.g_name}}</h3>
			                    </div>
			                  </div>
			                </router-link>
						</div>
					</ul>
					<!--第四块-->
					<ul class="indent_each_block four_mian" v-if="navshow == '4'">
						<div class="one_mian_each _width" v-for="blacklist in blacklists">
				             <router-link :to="{name:'wchat',params:{id:blacklist.u_id}}">
				                <div class="one_mian_each_main marginAuto clearfix">
				                  <div class="each-img pull-left">
				                    <img :src="blacklist.u_img" alt="头像"/>
				                  </div>
				                  <div class="name pull-left ellipsis01">
				                    <h3 v-text="blacklist.u_name"></h3>
				                  </div>
				                </div>
							</router-link>
						</div>
					</ul>
				</div>
			</div>
		</div>
		<!--=点击搜索=-->
		<!--<div class="keepOut keepOutSearch" v-show="keepOutblockSearch"></div>-->
		<div class="keepOut keepOutAddhint" v-if="keepOutblockAddhint" @click="addClose"></div>
		<!--<div class="search-alert" v-show="keepOutblockSearch">
			<div class="search-each _width">
				<router-link to="/wfriendsSearch">
				<div class="search-each-text">
					<span class="iconfont">&#xe680;</span>
					<em>搜索</em>
				</div>
				</router-link>
			</div>
			<div class="search-each _width">
				<div class="search-each-text" onClick="qrcode(0)">
					<span class="iconfont">&#xe65a;</span>
					<em>扫一扫</em>
				</div>
			</div>
		</div>-->
		<!--=右部加号=-->
		<div class="addhint" v-show="keepOutblockAddhint">
			<i class="addhint-arrows">▲</i>
			<router-link to="/wfriendsSearch">
			<div class="addhint-each _width">
				<div class="addhint-each-text marginAuto clearfix">
					<h5 class="iconfont pull-left">&#xe625;</h5>
					<h4 class="pull-right">添加朋友</h4>
				</div>
			</div>
			</router-link>
			<router-link to="/wgroupChat">
			<div class="addhint-each _width">
				<div class="addhint-each-text marginAuto clearfix">
					<h5 class="iconfont pull-left">&#xe60e;</h5>
					<h4 class="pull-right">发起群聊</h4>
				</div>
			</div>
			</router-link>
			<router-link to="/wcode">
			<div class="addhint-each _width" style="border: none;">
				<div class="addhint-each-text marginAuto clearfix">
					<h5 class="iconfont pull-left">&#xe66f;</h5>
					<h4 class="pull-right">二维码名片</h4>
				</div>
			</div>
			</router-link>
		</div>
		<!--底部tab-->
		<tab></tab>
	</div>
</template>

<script>
import tab from './table.vue';
	export default {
		components:{tab},
  data() {
    return {
    	userid:"&",
    	imgURL:this.imgURL,
      isActive: "1",
      navshow: "1",
      //好友列表
      friends: [],
      //聊天
      chats: [],
      //群聊
      groups: [],
      //黑名单
      blacklists: [],
      //搜索弹窗部分
      keepOutblockSearch: false,
      //右部加号
      keepOutblockAddhint: false,
      //切换导航部分
      one: true,
      two: false,
      three: false,
      four: false
    };
  },
  mounted() {
    var _this = this;
    var info = window.localStorage.data;
    var params = new URLSearchParams();
    if (info == undefined) {
      _this.$router.push("wlogin");
    } else {
      _this.$axios({
        url: "One/Social/index",
        method: "get",
        params: {
          token: info
        }
      }).then((res) => {
          if (res.data.status == 1) {
            let datas = res.data.data;
            this.friends = datas.friend; //好友列表
            this.chats = datas.chat; //聊天
            this.groups = datas.group; //群聊
            console.log(datas)
            this.blacklists = datas.blacklist; //黑名单
          }
        }).catch(err => {
          console.log(err);
        });
    }
  },
  methods: {
  	//扫码回调
//		qrcodeCallback:function (result){
//			alert(result);
//			//result为扫描的数据结果。
//			//请添加业务逻辑
//		},
    //搜索出弹窗
//  search() {
//    this.keepOutblockSearch = true;
//  },
    add() {
      this.keepOutblockAddhint = true;
    },
    addClose(){
     this.keepOutblockAddhint = false;
    },
    //导航切换
    nav(navtoggle) {
      this.isActive = navtoggle; //导航
      this.navshow = navtoggle; //控制块
    }
  }
};
</script>

<style scope>
@import "../css/public.css";
@import "../css/wmyfriend.css";
.navactive {
  /*导航字体*/
  color: #f3961f !important;
}
.navactivebottom {
  /*导航下线*/
  background: #f3961f !important;
}
.eachblock {
  /*选中块*/
  display: block !important;
}
.indent_each_block {
  /*首先全部块显示*/
  display: block !important;
}
/*==*/
/*遮罩层*/
.header {
  z-index: 100;
}
.keepOut {
  top: 0;
  z-index: 200;
}
/*{搜索}*/
.keepOutSearch {
  display: block;
}
/*{右部加号}*/
.keepOutAddhint {
  display: block;
}
.search-alert {
  margin-top: -25%;
}
  #navToggle_mian{
    padding-bottom: 40px;
  }
</style>
